<script setup>
import {
  ref,
  onMounted
} from 'vue'
import {
  useStore
} from 'vuex'
import { singleStoreAlipay, getOrderFinished } from '../http/api.js'
const activeTab = ref(0)
const activeNames = ref(['1'])
const dataArr = ref([])
const store = useStore()
const searVal = ref('')
const addToCart = (item, storeid) => {
  store.commit('ADD_CART_ITEM', {
    storeid: storeid,
    item: [item]
  }, 1)
}
const reduceGoods = (item, storeid) => {
  console.log(item)
  store.commit('REDUCE_CART_ITEM', {
    storeid: storeid,
    item: item
  })
}
const sumMny = (arr) => {
  var sums = 0
  for (var item of arr) {
    sums += parseFloat(item.goodsPrice)
  }
  return sums
}
const allSumMny = (arr) => {
  var sums = 0
  for (var idx in arr) {
    for (var it of arr[idx].item) { sums += parseFloat(it.goodsPrice) }
  }
  return sums
}
const singlePay = async (item) => {
  const goodsId = []
  item.item.forEach(i => {
    goodsId.push(i.goodsId)
  })
  singleStoreAlipay({
    stId: item.storeid,
    usrId: store.state.userInfo.userId,
    goodsId: goodsId.join()
  })
}
onMounted(() => {
  getOrderFinished({
    userId: store.state.userInfo.userId
  })
  dataArr.value = store.state.cartList
  console.log('datarr', dataArr)
})
</script>
<template>
  <div>
    <div class="sear_container">
      <van-search v-model="searVal" placeholder="请输入搜索关键词" class="sear" />
    </div>
    <van-tabs v-model:active="activeTab">
      <van-tab title="待支付">
        <div class="storeBox">
          <van-collapse v-model="activeNames" :border="false">
            <van-collapse-item title="黄焖鸡米饭" name="1" v-for="item in dataArr" :key="item.storeid">
              <van-list>
                <div class="goods_item" v-for="gs in item.item" :key="gs.goodsId">
                  <van-image :src="gs.goodsImg" width="80" height="80"></van-image>
                  <div class="goods_info">
                    <div class="title">{{ gs.goodsName }}</div>
                    <span class="goods_desc">{{ gs.goodsDesc }}</span>
                    <div class="price_container">
                      <span>￥{{ gs.goodsPrice }}</span>
                      <van-stepper v-model="gs.orderNum" step="1" min="0" :max="gs.goodsStockNum"
                        @plus="addToCart(gs, item.storeid)" @minus="reduceGoods(gs, item.storeid)" />
                    </div>
                  </div>
                </div>
              </van-list>
              <div class="sumMny">
                  <span>总计：{{sumMny(item.item)}}</span>
                  <div class="my-button" @click="singlePay(item)">结算</div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
<!--        <div class="allSumMny">-->
<!--          <span>总计：{{allSumMny(dataArr)}}</span>-->
<!--          <div class="my-button">结算</div>-->
<!--        </div>-->
      </van-tab>
      <van-tab title="已完成">
<!--        <van-list>-->
<!--          <div class="list-item-box">-->
<!--            <div class="list-item">-->
<!--              <div class="li-left">-->
<!--                <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" width="60" height="60"></van-image>-->
<!--                <div class="goods_status">-->
<!--                  <div class="goods_name">商品名称</div>-->
<!--                  <span class="status">已完成</span>-->
<!--                </div>-->
<!--                <van-icon name="arrow" />-->
<!--              </div>-->
<!--            </div>-->
<!--            <van-divider :style="{margin: '0px'}">黄焖鸡米饭</van-divider>-->
<!--          </div>-->
<!--        </van-list>-->
        <div class="storeBox">
          <van-collapse v-model="activeNames" :border="false">
            <van-collapse-item title="黄焖鸡米饭" name="1" v-for="item in dataArr" :key="item.storeid">
              <van-list>
                <div class="goods_item" v-for="gs in item.item" :key="gs.goodsId">
                  <van-image :src="gs.goodsImg" width="80" height="80"></van-image>
                  <div class="goods_info">
                    <div class="title">{{ gs.goodsName }}</div>
                    <span class="goods_desc">{{ gs.goodsDesc }}</span>
                    <div class="price_container">
                      <span>￥{{ gs.goodsPrice }}</span>
                      <van-stepper v-model="gs.orderNum" step="1" min="0" :max="gs.goodsStockNum"
                                   @plus="addToCart(gs, item.storeid)" @minus="reduceGoods(gs, item.storeid)" />
                    </div>
                  </div>
                </div>
              </van-list>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-tab>
      <van-tab title="售后">
      </van-tab>
    </van-tabs>
  </div>
</template>
<style scoped>
  .allSumMny {
    width: 100%;
    position: fixed;
    bottom: 80px;
    color: red;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding:10px;
    box-sizing: border-box;
    background-color: ghostwhite
  }
  .my-button {
    width: 54px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 3px;
    background-color: orangered;
    color: #ffffff;
    margin-left: 10px;
  }

  .sumMny {
    width: 100%;
    color: red;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .sumBox {
    color: red;
    display: flex;
    align-items: center;
  }

  .topD {
    margin-top: 5px;
  }

  .storeBox {
    background-color: #f4f4f4;
    margin: 5px;
    /* padding: 6px 5px; */
    border-radius: 6px;
  }

  .list-item {
    display: flex;
    align-items: center;
    height: 60px;
    margin: 8px;
  }

  .list-item-box {
    background-color: #f5f5f5;
    border-radius: 6px;
    padding: 5px 0;
    margin: 0 0 5px 0;
  }

  .li-left {
    flex-grow: 1;
    text-align: left;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .status {
    color: #9a9a9a;
  }

  .goods_status {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 5px 8px;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
  }
</style>
